<template>
  <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="Id"
        label="学号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="Name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="Scholarship_type"
        label="奖学金类型">
      </el-table-column>
      <el-table-column
        prop="App_status"
        label="申请状态">
            <template slot-scope="scope">
            <status :active-step="getStatusIndex(scope.row.App_status)"></status>
            </template>
      </el-table-column>
    </el-table>
</template>

<script>
import status from './Status/status.vue'
    export default {
      components:{
        //状态组件
        status
      },
      data() {
        return {
          tableData: [{
            Id: '2022082110',
            Name: '麻炳昌',
            Scholarship_type: '市级奖学金',
            App_status: status
          },
          {
            Id: '2022082111',
            Name: '王小虎',
            Scholarship_type: '市级奖学金',
            App_status: '用户1状态'
          },
          {
            Id: '2022082112',
            Name: '赵大山',
            Scholarship_type: '市级奖学金',
            App_status: '用户2状态'
          },
           
          ]
        }
      },
      methods:{
        getStatusIndex(status) {
            const steps = ['用户1状态', '用户2状态', '用户3状态'];
            return steps.indexOf(status) + 1;
        }
      }
    }
  </script>

<style>

</style>